$(function () {
  // 需求1:点击a链接 显示隐藏切换
  $('#loginBox a').on('click', function () {
    // 隐藏登录盒子,显示注册盒子
    $('#loginBox').hide()
    $('#regBox').show()
  })
  $('#regBox a').on('click', function () {
    // 显示登录盒子,隐藏注册盒子
    $('#regBox').hide()
    $('#loginBox').show()
  })

  // 需求2:自定义校验规则
  let form = layui.form
  form.verify({
    username: [/^[a-zA-Z0-9]{1,10}$/, '用户名必须是1-10位字母和数字'],
    pwd: [/^[\S]{6,15}$/, '密码长度必须是6-15位的费控字符串 '],
    // 确认密码规则
    repwd: function (value) {
      //   value就是给你哪个标签添加这个校验规则
      //   这个标签的值就赋值value
      //   console.log(value)
      //   console.log($('#regBox input[name=password]').val())
      //   console.log($('#regBox input[name=repassword]').val())
      let pwd = $('#regBox input[name=password]').val()
      // 如果原密码的值和确认密码的值不相等,就报错
      if (pwd !== value) {
        return '两次输入密码不一致'
      }
    }
  })

  // 需求3:注册功能
  let layer = layui.layer
  $('#formReg').on('submit', function (e) {
    e.preventDefault()
    //   发送ajax
    axios({
      method: 'POST',
      url: 'api/reguser',
      //   不要传递对象类型, 因为对象类型头信息设置的是application/json
      // content-type:application/json;目前接口文档不支持
      //   后端无法接受 application/json
      //   后端只支持a=1&b=2&c=3  application/x-www-form-urlencoded
      data: $(this).serialize() // a=1&b=2&c=3
    }).then(({ data: res }) => {
      if (res.status != 0) {
        return layer.msg(res.message)
      }
      // 成功提示
      layer.msg('注册成功 ')
      // 清空form表单
      $('#formReg')[0].reset()
      // reset()是DOM对象需要使用索引
      $('#regBox a').click()
    })
  })

  // 需求4:登录功能
  $('#formLogin').on('submit', function (e) {
    // 阻止表单默认提交
    e.preventDefault()
    // 发送ajax
    axios({
      method: 'POST',
      url: '/api/login',
      data: $(this).serialize()
    }).then(({ data: res }) => {
      console.log(res)
      if (res.status !== 0) {
        return layer.msg(res.message)
      }
      // 成功提示
      layer.msg('登录成功')
      //跳转页面
      location.href = '/index.html'
    })
  })
})
